<!doctype>
<head>
	<link type="text/css" rel="stylesheet" href="../rickshaw.css">
	<script src="../vendor/d3.v3.js"></script>
	<script src="../rickshaw.js"></script>
</head>
<body>

	<div id="chart_container">
		<div id="chart"></div>
		<div id="legend_container">
			<div id="smoother" title="Smoothing"></div>
			<div id="legend"></div>
		</div>
		<div id="slider"></div>
	</div>

	<script>

	// set up our data series with 50 random data points

	var seriesData = [ [], [], [] ];
	var random = new Rickshaw.Fixtures.RandomData(0.01);

	for (var i = 0; i < 150; i++) {
		random.addData(seriesData);
	}

	// instantiate our graph!

	var graph = new Rickshaw.Graph( {
		element: document.getElementById("chart"),
		width: 960,
		height: 500,
		renderer: 'line',
		series: [
			{
				color: "#c05020",
				data: seriesData[0],
				name: 'New York'
			}, {
				color: "#30c020",
				data: seriesData[1],
				name: 'London'
			}, {
				color: "#6060c0",
				data: seriesData[2],
				name: 'Tokyo'
			}
		]
	} );

	graph.render();

	var hoverDetail = new Rickshaw.Graph.HoverDetail( {
		graph: graph
	} );

	var axes = new Rickshaw.Graph.Axis.Time( {
		graph: graph,
		timeFixture: new Rickshaw.Fixtures.Time.Local()
	} );

	axes.render();

	</script>

</body>

